<template>
    <div class="scene" ref="sceneDiv"></div>
</template>


<script setup>
// script setup 是在单文件组件 (SFC) 中使用组合式 API的编译时语法糖。相比于普通的 script 语法，它具有更多优势
// 更少的样板内容，更简洁的代码
// 能够使用纯 Typescript 声明 props 和抛出事件。
// 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。
// 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。
import { onMounted, ref, watch } from "vue";
import * as THREE from "three";

// 导入场景
import scene from "@/three/scene"
// 导入相机
import camera from "@/three/camera"
// 导入渲染器
import renderer from "@/three/renderer";
// 导入坐标轴辅助器
import axesHelper from "@/three/axesHelper";
// 导入控制器
import controls from "@/three/controls";
// 导入创建物体方法
import createMesh from "@/three/createMesh";
// 导入初始化窗口方法
import "@/three/init";
// 导入每一帧的执行函数
import animate from "@/three/animate";
// 导入 gui
import gui from "@/three/gui"
// 导入物体
import AlarmSprite from '@/three/mesh/AlarmSprite';
import LightWall from '@/three/mesh/LightWall';
import FlyLineShader from '@/three/mesh/FlyLineShader';
import LightRadar from '@/three/mesh/LightRadar';
//导入事务消息总线
import eventHub from '@/utils/eventHub'
// 导入动画
import gsap from "gsap/gsap-core";

const sceneDiv = ref(null);

scene.add(camera); //添加相机到场景中
// scene.add(axesHelper);
createMesh();




onMounted(() => {
    // console.log(sceneDiv.value);
    // document.body.appendChild(renderer.domElement); //将绘制canvas添加到页面里
    sceneDiv.value.appendChild(renderer.domElement)
    animate();
});

const props = defineProps(["eventList"]);
const eventListMesh = [];

const mapFu = {
    火警: (position,i) => {
        const lightWall = new LightWall(1,2.5,position);
        lightWall.eventListIndex = i;
        scene.add(lightWall.mesh)
        eventListMesh.push(lightWall)
    },
    电力: (position,i) => {
        const lightRadar = new LightRadar(3,position);
        lightRadar.eventListIndex = i;
        scene.add(lightRadar.mesh)
        eventListMesh.push(lightRadar)
    },
    治安: (position,i) => {
        const color = new THREE.Color(
            Math.random()*256,
            Math.random()*256,
            Math.random()*256
        ).getHex();
        const flyLineShader = new FlyLineShader(position,color);
        flyLineShader.eventListIndex = i;
        scene.add(flyLineShader.mesh)
        eventListMesh.push(flyLineShader)
    }
};
eventHub.on("toggleEvent",(data)=>{
    console.log(data);
    eventListMesh.forEach((item) =>{
        if(item.eventListIndex === data.i){
            item.mesh.visible = true;
        }else{
            item.mesh.visible = false;
        }
    })
    const position = {
        x: props.eventList[data.i].position.x / 5 - 10,
        y:0,
        z: props.eventList[data.i].position.y / 5 - 10,
    }
    gsap.to(controls.target,{
        duration:1,
        x:position.x,
        y:position.y,
        z:position.z
    })
});

watch(() => props.eventList, () => {
    eventListMesh.forEach(item => {
        item.remove();
    })
    props.eventList.forEach((item,i) => {
        const position = {
            x: item.position.x / 5 - 10,
            z: item.position.y / 5 - 10,
        }
        const alarmSprite = new AlarmSprite(item.name, position);
        scene.add(alarmSprite.mesh)
        eventListMesh.push(alarmSprite)
        alarmSprite.onClick(function (e) {
            eventHub.emit("spriteClick",{event:item,i});
        });
        alarmSprite.eventListIndex = i;
        if(mapFu[item.name]){
            mapFu[item.name](position,i);
        }
    });
});



</script>

<style>
.scene {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
}
</style>
